<template>
    <div class="app-container">
        <el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
            <!-- <el-form-item label="档案名称" prop="title"> -->

            <!-- <el-form-item label="档案门类" prop="categoryId">
                <treeselect v-model="queryParams.categoryId" :options="deptOptions" :disable-branch-nodes="true" label
                    placeholder="请选择档案门类" noOptionsText="暂无数据" :normalizer="normalizerCategoryID"
                    :style="isStyle ? 'line-height: 32px;font-size:12px' : 'line-height: 36px;font-size:14px'"
                    style="width: 240px;" />
            </el-form-item> -->
            <el-form-item label="状态" prop="state">
                <el-select v-model="queryParams.state" placeholder="请选择" @keyup.enter.native="handleQuery">
                    <el-option v-for="(i, idx) in stateList" :key="idx" :label="i.label" :value="i.value">
                    </el-option>
                </el-select>
            </el-form-item>



            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- <el-row :gutter="10" class="mb8" ref="refbut">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" @click="handledetileTap(0)">详情</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" @click="handleExport()">下载</el-button>
            </el-col>
        </el-row> -->

        <el-table v-loading="loading" border :height="tableHeight" :data="list" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" type="index" />
            <el-table-column label="档案门类" prop="categoryName" :show-overflow-tooltip="true" />
            <el-table-column label="打包结束时间" prop="edPackTime" :show-overflow-tooltip="true" />
            <el-table-column label="打包开始时间" prop="packTime" :show-overflow-tooltip="true" />
            <el-table-column label="剩余下载次数" prop="num" :show-overflow-tooltip="true" />
            <el-table-column label="状态" prop="state" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-for="(i, idx) in stateList" :key="idx">
                        {{ scope.row.state == i.value ? i.label : '' }}
                    </span>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                    <el-button type="text" size="small" @click="handleExport(scope.row)">下载</el-button>
                </template>
            </el-table-column>

        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />




        <el-dialog title="详情" :visible.sync="isOpen" width="50%"  append-to-body
            :before-close="closeDelDialog">
            <el-table v-loading="loading" border :height="tableHeight" :data="detailList"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" type="index" />
                <el-table-column label="档号" prop="dh" :show-overflow-tooltip="true" />
                <el-table-column label="标题" prop="title" :show-overflow-tooltip="true" />

            </el-table>
        </el-dialog>

    </div>
</template>

<script>



import estimateTableHeight from '@/mixins/estimateTableHeight'//vue项目中element-tabel自动计算高度



import { list, detailList } from "@/api/archive/filesManage/dictRecord.js"
export default {
    name: "dictRecord",
    mixins: [estimateTableHeight], // 混入方法
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 列表表格数据
            list: [],
            detailList:[],
            // 弹出层标题
            title: "",

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                state: undefined,
            },

            isDeitOpen: false,
            isprintOpen: true,
            superviseRow: "",
            deptOptions: [],
            optionSelect: [],
            isStyle: true,
            rowIds: [],
            dateTime: undefined,
            stateList: [
                {
                    label: "打包失败",
                    value: "0"
                },
                {
                    label: "打包成功",
                    value: "1"
                },
                {
                    label: "打包中",
                    value: "2"
                }
            ],
            isOpen: false
        };
    },
    created() {
        if (this.$store.getters.size == 'small') {

            this.isStyle = true

        } else {

            this.isStyle = false
        }
        this.getList();
        // this.getDeptSelect();
        // this.deptTreeSelectPost();
        // console.log(this.dict.type.sys_normal_disable)
    },
    methods: {
        /** 查询立档单位列表 */
        getList() {
            this.loading = true;
            list(this.queryParams).then(response => {
                if (response.code = "200") {
                    this.list = response.rows;
                    this.total = response.total;
                    this.loading = false;
                }
            }
            );
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 下载按钮操作 */
        handleExport(row) {
            this.download('/archive/pack/download?id=' + row.id, {
            }, `record_${new Date().getTime()}.zip`).then(res => {
                this.getList();
            })
        },

        //详情
        handleClick(row) {
            var that = this;
            this.isOpen = true;
            detailList(row.id).then(res => {
                console.log(res, "skldjfklsdjfklsdj")
                this.detailList=res.rows
            })
        }
    }
};
</script>
<style lang="scss" scoped></style>
